<template>
	<div class="loading">
		<Modal
	        v-model="modal1"
	        @on-ok="ok"
	        @on-cancel="cancel">
	        <div slot="header" class="loading-header">报错信息</div>
	        <div class="biz-error">
	        	<i class="icon"></i>
	        	<div class="error-info">
	        		<div>{{errorData.response.data.reason}}</div>
	        		<hr v-show="showData" />
					<span v-show="showData">{{errorData.response.data.message}}</span>
	        	</div>
	        </div>
	        <div slot="footer">
	            <Button type="info" @click="showClick">{{showData==true?'收起':'展开'}}</Button>
	        	<Button type="warning" @click="copyClick">复制错误信息</Button>
	        </div>
	    </Modal>
	</div>
</template>

<script type="text/javascript">
	export default{
		data(){
			return{
				modal1: true,
				errorData:{},
				showData:false,
			}
		},
		destroyed(){
			//document.body.removeChild(this.$el);
			//this.isRemove = true;
		},
		methods:{
			ok () {
                //this.$Message.info('Clicked ok');
            },
            cancel () {
                //this.$Message.info('Clicked cancel');
            },
            showClick() {
            	if (this.showData == false) {
            		this.showData = true
            	} else {
            		this.showData = false
            	}
            },
            copyClick() {
            	//str.parseJSON()
            	let arr = this.errorData.response.data.message;
            	this.copyToClipboard(String(arr))
            },
            copyToClipboard (text) {
			    /*if(text.indexOf('-') !== -1) {
			        let arr = text.split('-');
			        console.log(arr)
			        text = arr[0] + arr[1];
			    }*/
			    let textArea = document.createElement("textarea");
			      textArea.style.position = 'fixed';
			      textArea.style.width = '2em';
			      textArea.style.height = '2em';
			      textArea.value = text;
			      document.body.appendChild(textArea);
			      textArea.select();
			      try {
			        let successful = document.execCommand('copy');
			        let msg = successful ? '成功复制到剪贴板' : '该浏览器不支持点击复制到剪贴板';
			        this.$Message.success(msg);
			      } catch (err) {
			      	this.$Message.error('该浏览器不支持点击复制到剪贴板');
			      }
			      document.body.removeChild(textArea);
			}
		}
	}
</script>

<style scoped lang="scss">
	.loading{
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
	}
	.loading-header{
			color: #fff;
		}
	.biz-error{
		width: 100%;
		max-height: 200px;
		padding:10px 20px 10px 0;
		overflow: auto;
		font-size: 14px;
		span{
			display: inline-block;
			width: 100%;
		}
	}
	.icon{
		display: inline-block;
		float: left;
		width: 30px;
		height: 30px;
		background-image: url('images/icon.png');
		background-size: 100%;
	}
	.error-info{
		width: 90%;
		margin-left: 10px;
		float: left;
		line-height: 2;
		span{
			font-size: 12px;
			margin-top: 10px;
		}
	}
</style>
